<template>
  <div class="text-book-manage">
    <div class="header">
      <el-button type="primary" @click="handleAdd">新增教材</el-button>
    </div>
    
    <div class="search-form">
      <el-form :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="教材名">
              <el-input v-model="searchForm.name" placeholder="请输入教材名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年级">
              <el-select v-model="searchForm.grade" placeholder="请选择年级">
                <el-option label="初一" value="初一"></el-option>
                <el-option label="初二" value="初二"></el-option>
                <el-option label="初三" value="初三"></el-option>
                <el-option label="高一" value="高一"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="科目">
              <el-select v-model="searchForm.subject" placeholder="请选择科目">
                <el-option label="数学" value="数学"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="版本">
              <el-input v-model="searchForm.version" placeholder="请输入版本"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="省市">
              <el-cascader 
                v-model="searchForm.provinceCity" 
                :options="cityOptions" 
                placeholder="请选择省市"
                separator="-"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'value' }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex; align-items: flex-end;">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset" style="margin-left: 10px;">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table :data="filteredList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="教材名" min-width="180"></el-table-column>
      <el-table-column prop="grade" label="年级" width="100"></el-table-column>
      <el-table-column prop="subject" label="科目" width="100"></el-table-column>
      <el-table-column prop="version" label="版本" min-width="100"></el-table-column>
      <el-table-column prop="provinceCity" label="省市" min-width="180"></el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleEdit(row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 模拟数据
const textBookList = ref([
  { id: 1, name: '数学教材', grade: '初一', subject: '数学', version: '人教版', provinceCity: '安徽-合肥' },
  { id: 2, name: '代数教材', grade: '初二', subject: '数学', version: '北师大版', provinceCity: '安徽-合肥' },
  { id: 3, name: '几何教材', grade: '初三', subject: '数学', version: '苏教版', provinceCity: '安徽-合肥' },
  { id: 4, name: '高中数学', grade: '高一', subject: '数学', version: '人教版', provinceCity: '安徽-合肥' }
]);

// 省市级联数据
const cityOptions = ref([
  {
    value: '安徽',
    label: '安徽',
    children: [
      {
        value: '合肥',
        label: '合肥'
      }
    ]
  }
]);

// 查询表单数据
const searchForm = ref({
  name: '',
  grade: '',
  subject: '',
  version: '',
  provinceCity: []
});

// 搜索触发变量
const searchTrigger = ref(0);

// 监听省市值变化
watch(
  () => searchForm.value.provinceCity,
  (newValue, oldValue) => {
    console.log('省市值变化:', oldValue, '->', newValue);
    console.log('过滤后的数据:', filteredList.value);
  },
  { deep: true }
);

// 过滤后的列表数据
const filteredList = computed(() => {
  // 依赖searchTrigger，确保点击搜索按钮时重新计算
  searchTrigger.value;
  
  return textBookList.value.filter(item => {
    return (
      (searchForm.value.name ? item.name.includes(searchForm.value.name) : true) &&
      (searchForm.value.grade ? item.grade === searchForm.value.grade : true) &&
      (searchForm.value.subject ? item.subject === searchForm.value.subject : true) &&
      (searchForm.value.version ? item.version.includes(searchForm.value.version) : true) &&
      (searchForm.value.provinceCity && searchForm.value.provinceCity.length > 0 ? 
        item.provinceCity === searchForm.value.provinceCity.join('-') : 
        true)
    );
  });
});

const router = useRouter();

// 查询方法
const handleSearch = () => {
  console.log('搜索条件:', searchForm.value);
  console.log('省市值类型:', typeof searchForm.value.provinceCity);
  console.log('省市值:', searchForm.value.provinceCity);
  // 更新搜索触发变量
  searchTrigger.value++;
}

// 重置方法
const handleReset = () => {
  searchForm.value = {
    name: '',
    grade: '',
    subject: '',
    version: '',
    provinceCity: []
  };

};

// 新增教材
const handleAdd = () => {
  router.push('/textBookManage/edit');
};

// 编辑教材
const handleEdit = (id) => {
  router.push({ path: '/textBookManage/edit', query: { id } });
};

// 删除教材
const handleDelete = (id) => {
  ElMessage.confirm('确定要删除该教材吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = textBookList.value.findIndex(item => item.id === id);
    if (index !== -1) {
      textBookList.value.splice(index, 1);
      ElMessage.success('删除成功');
    }
  });
};

</script>

<style scoped>
.text-book-manage {
  padding: 20px;
}
.header {
  margin-bottom: 20px;
}
.search-form {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}
</style>